<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
	</head>
	<body>
		<div>
			<!--  tableData表示数据来自于哪里  -->  
			<el-table
			  :data="tableData"
			  style="width: 100%">
			  <el-table-column
				prop="date"
				label="日期"
				width="180">
			  </el-table-column>
			  <el-table-column
				prop="name"
				label="姓名"
				width="180">
			  </el-table-column>
			  <el-table-column
				prop="address"
				label="地址">
			  </el-table-column>
			</el-table>
			
			
			<h1>员工列表</h1>
			<el-table
			    :data="tableData"
			    style="width: 100%">
				<el-table-column
				  type="index"
				  label="编号"
				  width="180">
				  <template slot-scope="scope">
				    <i class="el-icon-time"></i>
				    <span style="margin-left: 10px">{{ scope.row.id }}</span>
				  </template>
				</el-table-column>
			    <el-table-column
			      label="日期"
			      width="180">
			      <template slot-scope="scope">
			        <i class="el-icon-time"></i>
			        <span style="margin-left: 10px">{{ scope.row.date }}</span>
			      </template>
			    </el-table-column>
			    <el-table-column
			      label="姓名"
			      width="180">
			      <template slot-scope="scope">
			        <el-popover trigger="hover" placement="top">
			          <p>姓名: {{ scope.row.name }}</p>
			          <p>住址: {{ scope.row.address }}</p>
			          <div slot="reference" class="name-wrapper">
			            <el-tag size="medium">{{ scope.row.name }}</el-tag>
			          </div>
			        </el-popover>
			      </template>
			    </el-table-column>
			    <el-table-column label="操作">
			      <template slot-scope="scope">
			        <el-button
			          size="mini"
			          type="danger"
			          @click="handleDelete(scope.$index, scope.row)">删除</el-button>
			      </template>
			    </el-table-column>
			</el-table>
		</div>
	</body>
	<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
	<script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
	<script>
		let v=new Vue({
			el:"body>div",
			data:function(){
				return {
					tableData: [{
								id:'1',
					            date: '2016-05-02',
					            name: '王小虎',
					            address: '上海市普陀区金沙江路 1518 弄'
					          }, {
								id:'2',
					            date: '2016-05-04',
					            name: '王小虎',
					            address: '上海市普陀区金沙江路 1517 弄'
					          }, {
								id:'3',
					            date: '2016-05-01',
					            name: '王小虎',
					            address: '上海市普陀区金沙江路 1519 弄'
					          }]
				}
			},
			methods:{
				handleDelete(index,emp){
					v.$message("您删除了"+emp.name);
					v.tableData.splice(index,1);//从index处开始删除一个元素
				}
			}
		});
	</script>
</html>
